<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016-03-27
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/view/common/jsp_top.jsp" %>
<!-- 头部 ,href:'index/top'-->
<div data-options="region:'north',border:true,split:false,minWidth:800"
     style="height: 90px;width:auto !important;min-width:800px;overflow:hidden; ">

    <div id="top" style="width: 100%;height:88px; ">

        <!-- logo -->
        <div style="width:20%;height:88px;float:left; top:0px;left:0;"></div>

        <!-- 一级菜单 -->
        <div style="width:60%;height:88px;float:left;" align="center" id="tmenus">
        </div>

        <!-- 其他 -->
        <div style="width:20%;height:88px;float:right;">
            <div  align="right">
                <div title="AAA "
                     style="line-height:30px;height: 30px; margin: 28px 8px; text-align: center; display: inline-block;*display:inline; *zoom:1; ">
                    BBB
                </div>
                <div  style="line-height:30px; height: 30px; margin: 28px 8px; text-align: center; display: inline-block;*display:inline; *zoom:1; ">
                    提醒
                </div>
                <div
                        style="line-height:30px;height: 30px; margin: 28px 8px; text-align: center; display: inline-block;*display:inline; *zoom:1; ">
                    <a href="logout"  style=" color: #000;">注销</a>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 左部  ,href:'index/left' -->
<div data-options="region:'west',border:true,split:true,title:'导航'"
     style="width: 204px;min-width:180px;background: #e2e2e2;" >
    <div id="omenus" style="width: 100%;height: 100%;">

    </div>
</div>

<!-- 中间  ,href:'index/main'-->
<div data-options="region:'center',border:true,split:false,title:''" >
    <div id="tabs">
        <div title="Home">
            <div style="padding-top: 30px;text-align: center;">
               <%-- <c:forEach items="${menus }" var="menu">
                    <c:if test="${menu.name!='' }">
                        <span style="background: #FCFCFC;display: inline-block;line-height: 30px;padding: 0px 10px;margin: 0px 10px 0 0;border-radius:5px;border: #bbb solid 1px;cursor: pointer; " onclick="addTab('${menu.id}','${menu.name}','${menu.path}')">${menu.name}</span>
                    </c:if>
                </c:forEach>--%>
            </div>
        </div>
    </div>
</div>

<!-- 底部-->
<div data-options="region:'south',border:true,split:false"
     style="height: 30px; text-align: center;line-height: 30px;overflow: hidden;background: #cfd1cf -moz-linear-gradient(center top , #ebebeb, #cfd1cf) repeat scroll 0 0" >
    豫ICP11045123号&nbsp;&nbsp;豫公网安备110110000185
</div>

<script type="text/javascript">

    var config = {
        space : 2,//间距
        //elment_width_height : 65,//元素宽度
        elment_width : 80,//元素宽度
        elment_height : 60,//元素宽度
        data : [],//一级菜单data
        count : 0,//构建次数
        curFirstMenuId:null,//当前选中的一级菜单
        curOtherMenu:{}//当前其他级菜单
    };

    j(document).ready(function() {
        //main：构建主窗口
        build_main();

        //top:加载一级菜单数据
        loadFisrtMenu();

        //top:构建一级菜单
        build_top();

        //left：激活顶部第一个菜单同时把第一个菜单的其余菜单加载到left。
        j('#tmenus li:nth-child(1)').click();

        //top：窗口改变一级菜单调整
        j(window).resize(function() {
            build_top();
            clickFirstLevelMenu(config.curFirstMenuId);
        });



    });


    //***************************************************************************************************************************************
    //*************************************************************上部**********************************************************************
    //***************************************************************************************************************************************/

    //加载一级菜单
    function loadFisrtMenu() {
        j.ajax({
            url : 'menu/firstLevel',
            type : 'GET',
            async : false,//同步
            success : function(data) {
                if (!data) {//如果没有一级菜单，则退出。
                    data = [];
                }
                config.data = data;
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
            }
        });
    }

    //构建一级菜单
    function build_top() {

        //console.log(config);

        config.count = config.count + 1;//计数器+1

        var window_width = j(window).width() * 0.7; //x0.6 原因是 菜单所在div占总头部的60%；
        //console.log(window_width);

        // alert(window_width);
        var size_data = config.data.length;//数据长度

        if (size_data == 0)
            return;// 若无数据 退出

        var size_show = 0;//最终显示元素个数

        var prev_next_width = config.elment_width * 2;//（下一个）+（上一个）宽度
        var size_cur = (window_width - prev_next_width)
                / (config.elment_width + config.space * 2);//当前窗口最多容纳元素个数

        if (size_cur <= 0)
            size_show = 1;//至少显示一个
        else if (size_cur >= size_data)
            size_show = size_data;
        else
            size_show = size_cur;

        config.elements_width = (config.elment_width + config.space * 2)
                * size_show;//显示菜单宽度
        config.container_width = prev_next_width + config.elements_width;//容器宽度

        //清空
        j('#tmenus').empty();

        var container = j("<div class=\"menu-scroll\" style=\"position:relative; margin:14px auto; width:"+ config.container_width+"px\" ></div>");

        var prev = j("<span class=\"prev\" style=\"cursor:pointer;position:absolute;top:0; left:0;margin-right:"+config.space+"px;display:block; width:"+config.elment_width+"px; height:"+config.elment_height+"px;line-height:"+config.elment_height+"px; color:#00A0E9; text-align:center;font-size:16px;font-weight:900;\">&lt;</span>");
        prev.appendTo(container);

        var next = j("<span class=\"next\" style=\"cursor:pointer;position:absolute;top:0; right:0;margin-left:"+config.space+"px;display:block; width:"+config.elment_width+"px; height:"+config.elment_height+"px;line-height:"+config.elment_height+"px; color:#00A0E9; text-align:center;font-size:16px;font-weight:900; \">&gt;</span>");
        next.appendTo(container);

        var div = j("<div class=\"menu-list\" style=\"position:relative; width:"+config.elements_width+"px; height:"+config.elment_height+"px;  overflow:hidden\"></div>");
        var ul = j("<ul style=\"width:9999px;list-style: none; margin:0; padding: 0\"></ul>");
        for (var i = 0; i < config.data.length; i++) {
            j(
                    "<li title=\""+config.data[i].name+"\"  menuid="+config.data[i].id+" style=\"float:left;cursor:pointer; display:inline; width:"+config.elment_width+"px;height:"+config.elment_height+"px; line-height:"+config.elment_height+"px;margin:0 "+config.space+"px;padding:0 ;background-color:#8ED3FD; text-align:center;font-size:14px;vertical-align:middle;\">"
                    +config.data[i].name  + "</li>").appendTo(ul)
                    .click(function() {


                        //	j(this).css({
                        //	"background" : "#7A96DF"
                        //}).siblings().css({
                        //"background" : "#8ED3FD"
                        //});

                        //closeAllTabs();//关闭已经打开的其他一级菜单。

                        //var menuid = j(this).attr("menuid");
                        //alert(menuid);
                        //build_left(menuid);

                        var menuid = j(this).attr("menuid");
                        clickFirstLevelMenu(menuid);
                    });
        }
        ul.appendTo(div);
        div.appendTo(container);

        j('#tmenus').append(container);

        _scroll('.menu-scroll', '.prev', '.next', '.menu-list', 3, false);// true为自动播放，不加此参数或false就默认不自动
    }

    function clickFirstLevelMenu(menuid){
        if(!menuid)return;//还没有选中任何顶级菜单。
        if(menuid!=config.curFirstMenuId){
            config.curFirstMenuId=menuid;
            build_left(menuid);
        }
        j("#tmenus li[menuid='"+menuid+"']").css({"background" : "#7A96DF"}).siblings().css({"background" : "#8ED3FD"});
    }


    //左右滚动
    function _scroll(wraper, prev, next, menu, speed, auto) {
        var wraper = j(wraper);
        var prev = j(prev);
        var next = j(next);
        var menu = j(menu).find('ul');
        var w = menu.find('li').outerWidth(true);
        var s = speed;

        //1、先向左移动w（显示第二个元素）
        //2、移动完成后，执行回调：把第一个准加到最后（此时原来的第二个元素变成了第一个），然后修改margin-left：0。
        next.click(function() {
            menu.animate({
                'margin-left' : -w
            }, function() {
                menu.find('li').eq(0).appendTo(menu);
                menu.css({
                    'margin-left' : 0
                });
            });
        });

        //1、把最后一个元素准加到第一个，
        //2、向左移动w，紧接着动画向右移动w。
        prev.click(function() {
            menu.find('li:last').prependTo(menu);
            menu.css({
                'margin-left' : -w
            });
            menu.animate({
                'margin-left' : 0
            });
        });
        if (auto == true) {
            var cycle = setInterval(function() {
                next.click();
            }, s * 1000);
            wraper.hover(function() {
                clearInterval(cycle);
            }, function() {
                cycle = setInterval(function() {
                    next.click();
                }, s * 1000);
            });

        }
    }

    //***************************************************************************************************************************************
    //*************************************************************左部**********************************************************************
    //***************************************************************************************************************************************/
    //构建其他菜单
    function build_left(topmenuid) {
        //alert("build_other:"+topmenuid);
        var domid = "o_" + topmenuid;
        if (j("#" + domid).length == 0) {

            // alert("build_other tree dom exist?:NO!!!");
            j("<ul id=\""+domid+"\"></ul>").appendTo(j("#omenus"));
            //alert(j("#omenus").html());

            j("#" + domid).tree(
                    {
                        url : 'menu/otherLevel/' + topmenuid,
                        async : false,
                        method : 'GET',
                        //lines:true,
                        checkbox : false,
                        onClick : function(node) {
                            var isLeaf = j(this).tree('isLeaf', node.target);
                            if (!isLeaf) {//非叶节点
                                //j(node.target).removeClass('tree-node-selected');//去掉非叶子节点的阴影
                                j(this).tree('toggle', node.target);//展开或收缩该节点的子节点
                            } else {
                                //是叶节点，
                                //var title = node.text;
                                //var path = node.path;
                                //var attriutes=node.attributes;
                                //if(attriutes){//有attriutes
                                //var path=node.attributes.path;
                                if (node.path) {//有href
                                    addTab(node.id, node.text, node.path,topmenuid);
                                    //config.curOtherMenu[topmenuid]=node.target;
                                }
                                //}
                            }
                        },
                        onDblClick : function(node) {
                            //console.log(111);
                            var isLeaf = j(this).tree('isLeaf', node.target);
                            if (!isLeaf) {//非叶节点
                                //j(node.target).removeClass('tree-node-selected');
                                j(this).tree('toggle', node.target);
                            }
                        },
                        onBeforeLoad : function(node, param) {

                        },
                        onLoadSuccess : function(node, data) {
                            //1、
                            // 去掉 jquery easyui tree 每个节点前 的图标
                            //addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开
                            //j('.tree-icon,.tree-folder,.tree-folder-open,.tree-file').removeClass('tree-icon  tree-folder tree-folder-open tree-file');

                            j('.tree-node').css({
                                'border-bottom' : '1px solid #ccc'
                            });

                            //j('.tree-indent').html('-');

                            //2、
                            //有关 jquery easyui tree选择节点时的样式(tree-node-hover、.tree-node-selected)的自定义问题
                            //重新定义同命名class为tree-node-hove、tree-node-selected，并注释掉原来的样式内容，注意不是去掉，
                            //详情请参看pepper-grinder/easyui.css 1533行

                            //3、折叠菜单
                            var roots = j(this).tree('getRoots');
                            if (roots && roots.length > 1) {//多个根节点
                                for (var i = 0; i < roots.length; i++) {
                                    j(this).tree('collapse', roots[i].target);
                                }
                            } else if (roots && roots.length == 1) {//一个根节点
                                var root = roots[0];
                                j(this).tree('expand', root.target);
                                var children = j(this).tree('getChildren',
                                        root.target);
                                for (var i = 0; i < children.length; i++) {
                                    j(this)
                                            .tree('collapse',
                                                    children[i].target);
                                }
                            }
                            //alert(roots.length);
                        }
                    });

        }
        j("#" + domid).css({'display' : 'block'}).siblings().css({'display' : 'none'});
    }



    //***************************************************************************************************************************************
    //***************************************************main部**********************************************************************
    //***************************************************************************************************************************************/

    function build_main(){
        //main：构建main选项卡
        j('#tabs').tabs({
            fit : true,
            height : 40,
            tabHeight : 34,
            border : false,
            onSelect:function(title,index){
                if(title=='Home') return;

                var panel=j('#tabs').tabs('getTab',index);

                //'#'+pid+'#'+id,
                var id=panel.panel('options').id;
                var curfirstLevelMenuId=id.substring(1,id.lastIndexOf('#'));
                var curOtherLevelMenuId=id.substring(id.lastIndexOf('#')+1);
                //console.log(curOtherLevelMenuId);

                //激活当前tab所在的顶级菜单
                clickFirstLevelMenu(curfirstLevelMenuId);

                //激活当前tab所在的左树菜单
                var node=j('#o_'+curfirstLevelMenuId).tree('find',curOtherLevelMenuId);
                if(node){
                    j('#o_'+curfirstLevelMenuId).tree('select', node.target);
                }
            }
        });
    }


    //增加一个table
    function addTab(id, title, url,pid) {
        title = "<span  id=\"title_"+id+"\">" + title + "</span>";
        //title=decorateTitle(id, title);//防同名---add by cht 20150929
        //console.log(title);
        if (j('#tabs').tabs('exists', title)) {//若存在
            j('#tabs').tabs('select', title);//先选中
            var currPanel = j('#tabs').tabs('getSelected');//获得选中的panel

            var url = j(currPanel.panel('options').content).attr('src');
            if (url != undefined && currPanel.panel('options').title != 'Home') {
                //1.该更新不见效,原因是它不能更新内容为iframe的东西！
                currPanel.panel('refresh');

                //2、有问题，点击左树某一菜单两次，则无法关闭
                //j('#tabs').tabs('update',{
                //	tab:currPanel,
                //	options:{
                //		content:createFrame(url)
                //	}
                //})

                //3、更新iframe
                j("#" + id).attr("src", url);
            }
        } else {//不存在
            var content = createFrame(id, url);
            j('#tabs').tabs('add', {
                id:'#'+pid+'#'+id,
                title : title,
                content : content,
                closable : true
            });
        }
        //tabClose();
    }

    //创建panel(也是tab)的content！
    function createFrame(id, url) {
        var s = '<iframe scrolling="auto" id="' + id
                + '" frameborder="0"  src="' + url
                + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }

    //关闭所有的tabs
    function closeAllTabs() {
        var tabs_ = j('#tabs').tabs('tabs');

        //console.log(tabs_.length);

        //-以下处理是有问题，此功能暂不使用，故未调试，若使用，请修改之...
        for (i = 1; i < tabs_.length; i++) {
            j('#tabs').tabs('close', 1);
        }

        //j('.tabs-inner span:first-child').each(function(i,n){//i为该span在span集合中的序号，n为该span的dom对象，由于tabs-inner下有两个span，我们只要第一个span
        //通过F12(IE)，或者FireBug(FF)，可看到如下html
        //<A class=tabs-inner href="javascript:void(0)">
        //<SPAN class=tabs-title>Home</SPAN>
        //<SPAN class=tabs-icon></SPAN>
        //</A>

        //我们可分析出，每个tab选项下有两个span，第一个span放置该tab的title，第二个span为该tab的关闭图标
        //下面的代码就是通过获得每个tab的title来关闭该tab！
        //var t = j(n).text();
        //console.log("111111"+t);
        //if(t != 'Home') {
        //j('#tabs').tabs('close',t);
        //}

        //console.log("dfdf"+i);
        //var t = j(n).text();
        //if(t != 'Home') {
        //j('#tabs').tabs('close',i);
        //}

        //});
    }

    //
    function decorateTitle(id, title) {
        var title = "<span  id=\"title_"+id+"\">" + title + "</span>";//防同名---add by cht 20150929
        return title;
    }

    //
    function splitByLen(str,len){
        var newstr="";
        if(!str) return newstr;

        var length=Math.floor(str.length/len);
        for(var i=0;i<length;i++){
            if(i==length-1){
                newstr+=str.substring(i*len);
            }else{
                newstr+=str.substr(i*len,len)+"</br>";
            }
        }
        return newstr;

    }

</script>
<%@include file="/WEB-INF/view/common/jsp_bottom.jsp" %>
